<template>
         <div class="box_">
             <ul class="box_ul">
                 <li id="li_"
                     v-for="(item,index) in optionsList"
                     :key="index"
                     :class="current===index?'current':'' "
                     @click="choose(index,item.url)">
                     <img :src="item.img" alt="">{{item.names}}
                 </li>
                 <li class="transparent"  @click="choose('INFO')">
                     <DropDownBox :list-data="infoList"
                                  :title-data="infoTitle"
                                  :selected="infoSelected"
                                 ></DropDownBox>
                 </li>
                 <li class="transparent"  @click="choose('PRIVATE')">
                     <DropDownBox :list-data="privateList"
                                  :title-data="privateTitle"
                                  :selected="privateSelected"
                       >
                     </DropDownBox>
                 </li>
             </ul>
         </div>
</template>

<script>
import DropDownBox from "@/components/publicCommon/DropDownBox.vue";
import PrivateSpace from "@/components/publicCommon/PrivateSpace.vue";
import adminInfo from "@/components/home/AdminInfo.vue";



export default {
    name: "NavigationContent",
    computed: {
        adminInfo() {
            return adminInfo
        }
    },
    components: {PrivateSpace, DropDownBox},
    data(){
      return{
          ul_h:"",
          smooth:false,
          smooths:true,
          pull_down_r:false,
          infoTitle: {
              names:"信息管理",
              img:"/static/nav/kehu2C.png"},
          infoList:[
              {
                  names:"用户信息",
                  img:"/static/nav/yonghu.png",
                  url:"/userInformation"
              },
              {
                  names:"文章信息",
                  img:"/static/nav/wenzhang.png",
                  url:"/articleInformation"
              },
              {
                  names:"评论管理",
                  img:"/static/admin.png",
                  url:"/comments"
              }
          ],
          privateTitle: {
              names:"私密空间",
              img:"/static/nav/kehu2C.png"},
          privateList:[
              {
                  names:"祝福留言",
                  img:"/static/zhufuliuyan.png",
                  url:"/blessingMessage"
              },
              {
                  names:"点点滴滴",
                  img:"/static/diandi.png",
                  url:"/privateSpace"
              },
              {
                  names:"承诺约定",
                  img:"/static/yueding.png",
                  url:"/loveEvents"
              }
          ],
          optionsList:[
              {
                  names:"网站动态",
                  img:"/static/nav/shouye.png",
                  url:"/home"
              },
              {
                  names:"网站管理",
                  img:"/static/web.png",
                  url:"/websiteAdministration"
              },
              {
                  names:"图片管理",
                  img:"/static/shenghe.png",
                  url:"/greatPictures"
              },
              {
                  names:"Admin管理",
                  img:"/static/admin.png",
                  url:"/administratorSettings"
              },
              {
                  names:"留言管理",
                  img:"/static/liuyan.png",
                  url:"/messageBoards"
              },
              {
                  names:"发布公告",
                  img:"/static/gonggao.png",
                  url:"/announcement"
              },
              {
                  names:"操作日志",
                  img:"/static/log.png",
                  url:"/operationalLogs"
              },
          ],
          infoSelected:false,
          privateSelected:false,
          current:'',//选中的下标
      }
    },
    methods:{
        choose(item,url){
            this.current = item;
            if(item === 'INFO'){
                this.infoSelected= true
                this.privateSelected= false
            }else if(item === 'PRIVATE'){
                this.privateSelected= true
                this.infoSelected= false
            }else {
                this.privateSelected= false
                this.infoSelected= false
                this.$router.push(url);
            }
        },
        smooth_(){
            this.smooth = !this.smooth;
            this.smooths = !this.smooths;
            this.pull_down_r = !this.pull_down_r
        },
    }
}
</script>

<style scoped>
.current{
    color: rgb(253, 252, 252) !important;
    background: rgb(83, 210, 227) !important;
}
.box_{
    width: 100%;
    display: flex;
}
.box_ .box_ul{
    width: 100%;
    list-style: none;
    padding: 10px 0;
    padding-left: 5px;
}
.box_ .box_ul li{
    list-style: none;
    min-height: 45px;
    width: 100%;
    display: flex;
    align-items: center;
    color: white;
    transition: all .2s;
 }
.box_ .box_ul li img{
    margin:0 5px 0 8px;
    width: 20px;
}
.box_ .box_ul li:hover{
    cursor: pointer;
    background: rgba(94, 94, 96, 0.38);
}

.transparent{
    background:transparent !important;
}

.box_ul_ul li{
    position: relative;
    width: 100%;
    padding-left: 0 !important;
}

.smooth_1{
    animation: smooth_1 .3s ease-in-out 0s 1 forwards ;
}
.smooth_2{
    animation: smooth_2 .3s ease-in-out 0s 1 forwards ;
}
@keyframes smooth_1 {
    0%{
        height: 45px;
    }
    100%{
        height: 200px;
    }
}
@keyframes smooth_2 {
    0%{
        height: 200px;
    }
    100%{
        height: 45px;
    }
}

</style>